<template> 
<div class="bg-image">
    <div class="bronze-guide">
      <!-- 封面页 -->
      <template v-if="isCoverPage">
        <div class="cover-page">
          <div class="cover-content">
            <h1 class="cover-title">古青铜知识学习指南</h1>
            <p class="cover-description">
              本指南旨在引导您深入了解古青铜器的各个方面，开启您的学习之旅
            </p>
            <button @click="startGuide" class="start-button">开始学习</button>
          </div>
        </div>
      </template>
  
      <!-- 学习指南内容 -->
      <template v-else>
        <!-- 返回按钮 -->
        <div class="bronze-container">
        <button @click="goBack" class="back-button">返回</button>
        
        <h1 class="main-title">{{ currentStepTitle }}</h1>
        
        <!-- 主步骤导航 -->
        <div class="main-steps">
          <ul>
            <li
              v-for="(step, index) in steps"
              :key="index"
              :class="{ active: currentMainStep === index }"
              @click="goToMainStep(index)"
            >
              {{ step.title }}
            </li>
          </ul>
        </div>
        
        <!-- 子步骤导航（如果有） -->
        <div v-if="currentStepHasSubSteps" class="sub-steps">
          <ul>
            <li
              v-for="(subStep, index) in currentMainStepObj.subSteps"
              :key="index"
              :class="{ active: currentSubStep === index }"
              @click="goToSubStep(index)"
            >
              {{ subStep.title }}
            </li>
          </ul>
          </div>
        </div>
        
        <!-- 内容展示 -->
        <transition name="fade" mode="out-in">
          <div :key="currentContentKey" class="step-content">
            <!-- 青铜器的简介 -->
            <template v-if="currentMainStepObj.title === '青铜器的简介'">
              <div class="intro-section content-row">
                <img v-if="currentContent.image" :src="'/guide_images/' + currentContent.image" :alt="currentContent.title" class="content-image" />
                <div class="content-text">
                  <p>{{ currentContent.text }}</p>
                </div>
              </div>
            </template>
            
            <!-- 青铜器的分类 -->
            <template v-else-if="currentMainStepObj.title === '青铜器的分类'">
              <div class="classification-section">
                <div 
                  class="category content-row" 
                  v-for="(category, index) in currentMainStepObj.subSteps[currentSubStep].categories" 
                  :key="index"
                >
                  <img :src="'/guide_images/' + category.image" :alt="category.title" class="content-image" />
                  <div class="content-text">
                    <h3>{{ category.title }}</h3>
                    <p class="category-description">{{ category.description }}</p>
                  </div>
                </div>
              </div>
            </template>
            
            <!-- 青铜器的年代 -->
            <template v-else-if="currentMainStepObj.title === '青铜器的年代'">
              <div class="chronology-section content-row">
                <img :src="'/guide_images/' + currentContent.image" :alt="currentContent.title" class="content-image" />
                <div class="content-text">
                  <h3>{{ currentContent.title }}</h3>
                  <p>{{ currentContent.description }}</p>
                </div>
              </div>
            </template>
            
            <!-- 青铜器典型知识 -->
            <template v-else-if="currentMainStepObj.title === '青铜器典型知识'">
              <div class="knowledge-section content-row">
                <img v-if="currentContent.image" :src="'/guide_images/' + currentContent.image" :alt="currentContent.title" class="content-image" />
                <div class="content-text">
                  <p>{{ currentContent.text }}</p>
                </div>
              </div>
            </template>
            
            <!-- 青铜器典型特征 -->
            <template v-else-if="currentMainStepObj.title === '青铜器典型特征'">
              <div class="features-section">
                <div 
                  class="feature content-row" 
                  v-for="(feature, index) in currentMainStepObj.subSteps[currentSubStep].features" 
                  :key="index"
                >
                  <img :src="'/guide_images/' + feature.image" :alt="feature.title" class="content-image" />
                  <div class="content-text">
                    <h4>{{ feature.title }}</h4>
                    <p class="feature-description">{{ feature.description }}</p>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </transition>
        
        <!-- 导航按钮 -->
        <div class="navigation-buttons">
          <button @click="prevContent" :disabled="isFirstContent" class="prev-button">上一步</button>
          <button 
            v-if="!isLastContent" 
            @click="nextContent" 
            :disabled="isLastContent"
            class="next-button"
          >
            下一步
          </button>
          <button 
            v-else 
            @click="showModal = true" 
            class="complete-button"
          >
            前往练习
          </button>
        </div>
        
        <!-- 步骤指示器 -->
        <div class="step-indicator">
          第 {{ currentStepNumber }} 步，共 {{ totalSteps }} 步
        </div>
  
        <!-- 自定义模态框 -->
        <div v-if="showModal" class="modal-overlay">
          <div class="modal-content">
            <h2>前往实战练习</h2>
            <p>您是否确定要前往实战练习？</p>
            <div class="modal-buttons">
              <button @click="confirmNavigation" class="confirm-button">确定</button>
              <button @click="closeModal" class="cancel-button">取消</button>
            </div>
          </div>
        </div>
      </template>
    </div> 
  </div> 
</template>
<script>
import axios from 'axios';
import { ref, computed, watch, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { BASE_URL } from '@/config.js';

export default {
  name: 'BronzeGuide',
  data() {
    return {
      // ... 其他数据属性
      fromSection: null,
    };
  },
  mounted() {
    this.fromSection = this.$route.query.fromSection;
    // ... 其他挂载逻辑
  },
  setup() {
    const router = useRouter();
    const route = useRoute();

    const fromSection = ref(null);

    onMounted(() => {
      fromSection.value = route.query.fromSection;
    });
// 定义步骤数据结构（封面为第一个步骤）
const steps = ref([
      {
        title: '青铜器的简介',
        content: {
          image: 'bronzeguide_1.jpg', // 使用相对路径
          text: '青铜器是中国古代重要的文化遗产之一，其历史可以追溯到距今约四五千年的夏商时期，广泛使用于礼仪、军事和日常生活。青铜器的制造工艺成熟于商代，盛行于西周和春秋战国时期。主要类别包括礼器、兵器、乐器、工具和生活器皿。礼器如鼎、爵等多用于祭祀和宴饮活动，兵器如戈、矛则用于战争和防卫。青铜器具有厚重、庄严的造型特点，表面常饰有云雷纹、夔龙纹、饕餮纹等装饰，具有强烈的象征意义。年代上，青铜器经历了夏商、西周、春秋战国、秦汉等多个阶段，不同时期的器物风格和用途也有所变化，如战国时期青铜器更注重实用性与装饰性并重，秦汉时期青铜器逐渐被铁器和其他材料所取代。'
        }
      },
      {
        title: '青铜器的分类',
        subSteps: [
          {
            title: '鼎和簋',
            categories: [
              {
                title: '鼎',
                image: 'ding.png', // 使用相对路径
                description: '鼎是中国古代最具象征意义的青铜礼器之一，最早出现于夏商时期。鼎通常为三足或四足，腹部较深，常用于烹煮或盛放食物。作为祭祀礼器，鼎象征着权力和地位，是统治者用于祭天地、祖先的器物。鼎的大小、形状和数量往往与使用者的身份相关联。'
              },
              {
                title: '簋',
                image: 'gui.png', // 使用相对路径
                description: '簋是一种带有双耳的圆形盛器，广泛用于商周时期的祭祀活动中，主要盛放谷物或食物。簋的造型庄重，常与鼎一起使用，是古代贵族和统治者在祭礼中不可或缺的礼器。簋上常刻有铭文，记录重要的历史事件或人物。'
              }
            ]
          },
          {
            title: '觚与壺',
            categories: [
              {
                title: '觚',
                image: 'gu.png', // 使用相对路径
                description: '觚是一种细长的饮酒器，主要用于商周时期的祭祀和典礼活动。觚的造型高雅，通常有喇叭状的口部，杯身细长。它与爵、尊等其他饮酒器配套使用，象征着礼仪中的等级和规范，常见于贵族宴饮或祭祀场合。'
              },
              {
                title: '壺',
                image: 'hu.png', // 使用相对路径
                description: '壺是一种带盖、有长颈的青铜盛水或酒的容器，最早见于商代晚期，流行于西周和春秋战国时期。壺的形制多样，有圆形、方形、扁形等，常用于礼仪或宴席上斟酒倒水。壺不仅具实用功能，也作为装饰品，其外表多饰有精美的纹饰和铭文。'
              }
            ]
          },
          {
            title: '爵与尊',
            categories: [
              {
                title: '爵',
                image: 'jue.png', // 使用相对路径
                description: '爵是古代专门用于温酒和斟酒的青铜礼器，常见于商周时期的祭祀活动。爵的造型独特，通常有三足和一个长流，便于倾倒。爵是贵族宴饮中的重要器具，象征着饮酒礼仪中的等级制度，使用时需根据身份进行严格的规范。'
              },
              {
                title: '尊',
                image: 'zun.png', // 使用相对路径
                description: '尊是一种大型青铜容器，用于盛放酒或其他液体，广泛用于商周时期的祭祀和宴饮活动。尊的造型厚重稳健，多为圆腹或方形，常带有华丽的纹饰。作为礼器，尊体现了古代礼仪中的庄重和威严，往往与其他酒器如觚、爵等配套使用。'
              },
              
            ]
          },
          {
            title: '卣与觶',
            categories: [
              {
                title: '卣',
                image: 'you.png', // 使用相对路径
                description: '卣是一种青铜盛酒器，流行于商周时期，常用于贵族宴饮或祭祀活动。卣通常带盖，形状多为椭圆形或扁圆形，器身有弧形提梁，便于携带。卣外部多装饰复杂的纹饰，象征地位和权力。其主要功能是储存和斟酒，在祭礼和盛宴中体现礼仪和规制'
              },
              {
                title: '觶',
                image: 'zhi.png', // 使用相对路径
                description: '觶是一种用于饮酒的青铜器，形制与觚相似，常见于商周时期的贵族宴饮中。觶的造型较为宽大，有圆形口和深腹，通常带有圈足或三足支撑。作为礼器，觶多用于祭祀场合，象征着等级和尊贵，体现出古代礼仪的繁复和庄重。'
              }, 
            ]
          },
          {
            title: '甗与匜',
            categories: [
              {
                title: '甗',
                image: 'yan.png', // 使用相对路径
                description: '甗是一种古代青铜蒸煮器，流行于商周时期，器形类似于现代的蒸锅。甗分为上下两部分，下部盛水，上部为蒸屉，用于加热和烹煮食物。甗的外观厚重，常有精美的纹饰，象征着礼仪中的饮食文化，常用于祭祀和宴饮场合。'
              },
              {
                title: '匜',
                image: 'yi.png', // 使用相对路径
                description: '匜是一种青铜器，用于盛水或盥洗，流行于西周至战国时期。匜的形状类似于现代的水壶，常配有长流和提手，便于倒水。匜主要用于贵族的日常清洁或礼仪洗手，是古代祭祀或宴饮仪式中常见的辅助器具。'
              }, 
            ]
          },
          {
            title: '鐘与鬲',
            categories: [
              {
                title: '鐘',
                image: 'zhong.png', // 使用相对路径
                description: '鐘是一种青铜乐器，多见于西周至春秋战国时期，常用于宗庙祭祀和宫廷乐舞。鐘一般为扁圆形，有击面和内置锤子，悬挂在架子上敲击发声。鐘通常成组使用，按音高排列，象征着礼仪中的音乐文化，反映了古代的音律制度和等级。'
              },
              {
                title: '鬲',
                image: 'li.png', // 使用相对路径
                description: '鬲是一种古代青铜炊器，主要用于煮饭或煮肉，常见于商周时期。鬲有三个中空的足，足部可以直接接触火源，腹部深广。作为礼器，鬲不仅用于祭祀中的烹饪，也象征了礼仪中的饮食文化和阶层地位，常与其他炊器搭配使用。'
              }, 
            ]
          },
          {
            title: '剑与盘',
            categories: [
              {
                title: '剑',
                image: 'jian.png', // 使用相对路径
                description: '剑是中国古代重要的青铜兵器之一，常见于春秋战国时期。青铜剑具有双刃，长度适中，便于近身格斗。剑的制造工艺精湛，剑身通常饰有精美的纹饰和铭文，象征着武力和权威，既是战场上的利器，也是身份和地位的象征。'
              },
              {
                title: '盘',
                image: 'pan.png', // 使用相对路径
                description: '盘是中国古代的一种青铜器皿，常用于盛水或清洗，尤其在祭祀和礼仪场合中使用。盘的形状多为浅口圆形，底部常有装饰性的支脚。古代贵族宴饮时，盘常与匜搭配使用，用于洗手或清洁其他器物，是古代礼仪文化中的重要组成部分。'
              }, 
            ]
          }
          // 你可以根据需要添加更多子步骤和类别
        ]
      },
      {
        title: '青铜器的年代',
        subSteps: [
          {
            title: '商代',
            content: {
              image: 'shang_dynasty.png', // 使用相对路径
              title: '商代',
              description: '商代青铜器以其规模宏大、工艺复杂和纹饰华丽著称，是中国青铜文明的巅峰之一。商代青铜器主要用于宗庙祭祀和军事用途，器物种类丰富，包括鼎、簋、爵、尊等。其纹饰以饕餮纹为代表，凸显威严与神秘感。铸造技术采用了成熟的陶范法，造型多为厚重、稳健，体现了当时青铜器的实用性与审美价值。商代青铜器不仅是权力与财富的象征，还反映了当时人们对神灵与祖先的崇拜，体现了王权神授和宗教仪式在社会中的重要性。'
            }
          },
          {
            title: '西周',
            content: {
              image: 'western_zhou.png', // 使用相对路径
              title: '西周',
              description: '西周青铜器继承并发展了商代青铜文化，器物造型逐渐简洁而庄重，功能性有所强化。西周时期的青铜器更多用于礼制和外交活动，成为维系宗法制度的重要物品。铭文在这一时期开始盛行，常见于青铜器上，记载了重大事件和世系传承，具有重要的历史价值。纹饰风格上，西周青铜器逐渐摒弃了商代的繁复，向简洁优雅过渡，青铜器上常见窃曲纹、夔纹等。整体而言，西周青铜器反映了社会制度的成熟与礼仪体系的完善。'
            }
          },
          {
            title: '春秋',
            content: {
              image: 'spring_autumn.png', // 使用相对路径
              title: '春秋',
              description: '春秋时期是中国历史上的大变革时代，青铜器也表现出鲜明的时代特征。春秋青铜器种类丰富，除礼器、兵器外，还出现了更多的实用器如车马器、农具等。此时青铜器的铭文增多，内容涉及政治、军事、社会生活等多个方面。铸造工艺更加精湛，装饰风格趋于简洁实用，但依旧保留了象征权力和身份的功能。代表性器物如曾侯乙编钟，反映了当时青铜器在乐器制作中的广泛应用，展现了工艺与文化的双重成就。'
            }
          },
          {
            title: '战国',
            content: {
              image: 'warring_states.png', // 使用相对路径
              title: '战国',
              description: '战国时期青铜器的铸造技术更加成熟，器物类型进一步多样化，兵器制造尤其精良，如青铜剑、戈等展现了锋利与轻巧的结合。随着铁器的广泛使用，青铜器的功能逐渐从日常实用品转向礼器和艺术品。战国青铜器的装饰风格向华丽和繁复方向发展，龙凤纹、兽面纹等更加精细。铭文内容丰富，记录了社会各阶层的生活，具有重要的历史参考价值。总体来看，战国青铜器见证了中国古代冶金技术的高度发展与文化繁荣。'
            }
          }
        ]
      },
      {
        title: '青铜器典型知识',
        subSteps: [
          {
            title: '铸造工艺',
            content: {
              image: 'knowledge1.jpg', // 使用相对路径
              text: '青铜器的铸造工艺是中国古代冶金技术的核心，主要采用陶范法铸造。首先工匠用泥土制成陶范，按器物形状分段制作，之后将熔融的铜、锡、铅等金属混合物倒入模具中冷却成型。商代青铜器的铸造工艺最为复杂，不仅体现在器形的多样化，还包括细腻的纹饰刻画。西周时期青铜器的铸造更加规范化，器物厚重，工艺成熟。春秋战国时期工艺趋于精细化，器物结构更加复杂，表面装饰更加华丽。青铜器的铸造工艺代表了中国古代高超的冶炼与工艺成就。'
            }
          },
          {
            title: '礼制功能',
            content: {
              image: 'knowledge2.png', // 使用相对路径
              text: '青铜器在古代中国不仅是一种物质工具，更具有重要的礼制功能。它是宗庙祭祀、国家大典和贵族宴享中不可或缺的器物。鼎、簋等青铜礼器在商周时期成为宗法制度的象征，用于祭祀祖先、神灵和庆典仪式。青铜器的数量和规格常与身份、地位相联系，体现出等级制度的森严。铭文也成为青铜器中记录重大事件的媒介，赋予了其更深的文化意义。青铜器的礼制功能不仅在实用上满足了统治阶层的需要，更成为权力与地位的象征。'
            }
          },
          {
            title: '纹饰艺术',
            content: {
              image: 'knowledge3.jpg', // 如果没有图片，可以留空
              text: '青铜器的纹饰不仅仅是装饰，还具有丰富的象征意义和文化内涵。商代青铜器以饕餮纹为代表，纹饰威严神秘，象征权力和宗教信仰。西周时期纹饰趋于简化，主要以夔纹、窃曲纹等为主，表现出一种庄重与稳健。春秋战国时期，青铜器上的纹饰更加多样化，龙凤纹、兽面纹、云雷纹等大量运用，表现出一种对自然与生命的崇敬。这些纹饰不仅提升了器物的美感，还表达了当时人们对天地、神灵、自然力量的敬畏与想象。'
            }
          },
          {
            title: '铭文',
            content: {
              image: 'knowledge4.png', // 如果没有图片，可以留空
              text: '青铜器上的铭文是研究中国古代历史、政治和社会制度的重要资料。最早的铭文出现在西周时期，多为记事铭文，内容涉及战争、祭祀、封赐、盟约等。铭文的字数和内容往往反映出青铜器主人的身份与地位，尤其是大型青铜器的铭文，如“毛公鼎”，其铭文记录了周王朝的重要事件。春秋战国时期，青铜器铭文更加丰富，内容广泛涉及社会生活、外交、商业等方面。铭文不仅有历史价值，还体现了当时的书法艺术和文化气息。'
            }
          },
          {
            title: '军事功能',
            content: {
              image: 'knowledge5.png', // 如果没有图片，可以留空
              text: '青铜器不仅是礼制和祭祀的重要物品，在军事领域也有广泛应用。青铜兵器包括戈、剑、矛等，广泛用于古代战争中。商周时期，青铜兵器以其锋利和耐用性著称，如青铜剑在设计上体现出轻巧与锋利的结合。春秋战国时期，随着战争频发，青铜兵器的制作技术更加精良，许多兵器上还刻有铭文，记录了持有者的身份或使用场合。青铜兵器是当时贵族和武士阶层的重要装备，象征着战争中的荣誉与权力。'
            }
          }
          // 你可以根据需要添加更多知识点
        ]
      },
      {
        title: '青铜器典型特征',
        subSteps: [
          {
            title: '兽面纹与夔龙纹',
            features: [
              {
                title: '兽面纹',
                image: '1.jpg', // 使用相对路径
                description: '青铜器上常见的装饰纹样，通常由两只眼睛、一张鼻口构成，寓意威严神秘。兽面纹可能象征神灵与力量，显示了古人对自然力量的敬畏。'
              },
              {
                title: '夔龙纹',
                image: '2.jpg', // 使用相对路径
                description: '一种形似龙的单足动物纹样，常见于青铜器表面。夔龙是古代神话中的神兽，象征着权力与神秘，是祈福的吉祥象征。'
              }
            ]
          },
          {
            title: '窃曲纹与圆圈纹',
            features: [
              {
                title: '窃曲纹',
                image: '3.jpg', // 使用相对路径
                description: '由连续的弯曲线组成的纹饰，具有较强的装饰感。窃曲纹往往呈现出连续、规整的几何美感，象征秩序与和谐。'
              },
              {
                title: '圆圈纹',
                image: '4.jpg', // 使用相对路径
                description: '青铜器上的几何纹样，常见于酒器、鼎等器物表面。圆圈纹象征团结与永恒，展现出古人对宇宙的理解。'
              }
            ]
          },
          {
            title: '雷纹与蟠螭纹',
            features: [
              {
                title: '雷纹',
                image: '5.jpg', // 使用相对路径
                description: '方形螺旋状的几何纹饰，密集排列于器物表面。雷纹代表雷电之力，表达古人对自然现象的崇敬与畏惧。'
              },
              {
                title: '蟠螭纹',
                image: '6.png', // 使用相对路径
                description: '一种以螭龙为主题的卷曲盘绕图案，螭龙是没有角的小龙，象征神秘与力量。蟠螭纹常用于高等级的青铜器上，代表着皇权与神圣不可侵犯的地位。'
              }
            ]
          },
          {
            title: '云纹与蝉纹',
            features: [
              {
                title: '云纹',
                image: '7.png', // 使用相对路径
                description: '如同流云般的纹样，柔美飘逸，常见于青铜器表面。云纹象征着祥瑞与天象，反映了古人对天与地关系的思考。'
              },
              {
                title: '蝉纹',
                image: '8.jpg', // 使用相对路径
                description: '蝉是古人认为的神圣昆虫，常作为装饰纹样出现，象征生命与灵魂的不朽。蝉纹多见于礼器和祭祀器具。'
              }
            ]
          },
          {
            title: '勾连雷纹与乳钉纹',
            features: [
              {
                title: '蛇纹',
                image: '9.png', // 使用相对路径
                description: '：蛇纹是以蛇形为主题的装饰纹样，通常表现为盘绕或蜿蜒曲折的线条，多见于礼器和权力象征的青铜器上，突显出神秘与威严的气息'
              },
              {
                title: '乳钉纹',
                image: '10.png', // 使用相对路径
                description: '由小圆形突起组成的纹饰，通常排列规整，起到装饰与突出器物质感的作用。乳钉纹象征坚实和永恒。'
              }
            ]
          },
          {
            title: '饕餮纹与龙纹',
            features: [
              {
                title: '饕餮纹',
                image: '11.png', // 使用相对路径
                description: '以夸张的兽面为主体的纹饰，象征威严与神秘。饕餮是中国古代传说中的神兽，常出现在祭祀器具上。'
              },
              {
                title: '龙纹',
                image: '12.jpg', // 使用相对路径
                description: '龙是古代神话中的神圣动物，常被作为权力和神秘力量的象征。龙纹在青铜器上多种形式出现，显示出庄重与神圣感。'
              }
            ]
          },
          {
            title: '垂鳞纹与羽状纹',
            features: [
              {
                title: '垂鳞纹',
                image: '13.png', // 使用相对路径
                description: '模仿鱼鳞状的纹样，多用于水器和酒器。鳞纹象征着保护与流动，传递出古人对生命与自然的敬畏。'
              },
              {
                title: '羽状纹',
                image: '14.png', // 使用相对路径
                description: '如同羽毛般的装饰纹样，表现轻盈与自由，常出现在青铜器的边缘或器耳处，增强装饰感与优雅气质。'
              }
            ]
          },
          {
            title: '涡纹与鱼纹',
            features: [
              {
                title: '涡纹',
                image: '15.jpg', // 使用相对路径
                description: '一种螺旋形的纹饰，象征着生生不息的生命力量。涡纹往往用于青铜器的主体装饰，赋予器物动感与活力。'
              },
              {
                title: '鱼纹',
                image: '16.png', // 使用相对路径
                description: '以鱼为主题的装饰图案，象征着繁荣与生机。鱼纹常见于祭祀与礼器上，表达了古人对生殖和丰收的崇拜。'
              }
            ]
          }
          // 你可以根据需要添加更多子步骤和特征
        ]
      }
      // 其他主步骤...
    ]);
    const currentMainStep = ref(-1); // 初始化为封面页
    const currentSubStep = ref(0);
    const showModal = ref(false); // 控制模态框显示

    // 计算当前主步骤对象
    const currentMainStepObj = computed(() => {
      if (currentMainStep.value === -1) {
        return null;
      }
      return steps.value[currentMainStep.value];
    });

    // 计算当前是否有子步骤
    const currentStepHasSubSteps = computed(() => {
      return currentMainStepObj.value && currentMainStepObj.value.subSteps && currentMainStepObj.value.subSteps.length > 0;
    });

    // 当前内容数组（主步骤或子步骤）
    const currentContent = computed(() => {
      if (currentStepHasSubSteps.value) {
        const stepTitle = currentMainStepObj.value.title;
        const subStep = currentMainStepObj.value.subSteps[currentSubStep.value];
        if (stepTitle === '青铜器的分类') {
          return subStep.categories;
        } else if (stepTitle === '青铜器的年代') {
          return subStep.content;
        } else if (stepTitle === '青铜器典型知识') {
          return subStep.content;
        } else if (stepTitle === '青铜器典型特征') {
          return subStep.features;
        }
      } else if (currentMainStepObj.value) {
        return currentMainStepObj.value.content;
      }
      return null;
    });

    // 当前步骤标题
    const currentStepTitle = computed(() => {
      if (currentStepHasSubSteps.value) {
        const stepTitle = currentMainStepObj.value.title;
        const subStep = currentMainStepObj.value.subSteps[currentSubStep.value];
        return subStep.title;
      } else if (currentMainStepObj.value) {
        return currentMainStepObj.value.title;
      }
      return '';
    });

    const currentContentKey = computed(() => {
      return `${currentMainStep.value}-${currentSubStep.value}`;
    });

    // 当前步骤编号
    const currentStepNumber = computed(() => {
      let count = 0;
      for (let i = 0; i < steps.value.length; i++) {
        if (i < currentMainStep.value) {
          count += steps.value[i].subSteps ? steps.value[i].subSteps.length : 1;
        } else if (i === currentMainStep.value) {
          count += currentStepHasSubSteps.value ? (currentSubStep.value + 1) : 1;
        }
      }
      return count;
    });

    // 总步骤数
    const totalSteps = computed(() => {
      return steps.value.reduce((acc, step) => acc + (step.subSteps ? step.subSteps.length : 1), 0);
    });

    // 导航到指定的主步骤
    const goToMainStep = (index) => {
      currentMainStep.value = index;
      currentSubStep.value = 0;
      scrollToTop();
    };

    // 导航到指定的子步骤
    const goToSubStep = (index) => {
      currentSubStep.value = index;
      scrollToTop();
    };

    // 导航到上一步
    const prevContent = () => {
      if (isCoverPage.value) return; // 封面页没有上一步

      if (currentStepHasSubSteps.value) {
        const stepTitle = currentMainStepObj.value.title;
        if (stepTitle === '青铜器的分类' ||
            stepTitle === '青铜器的年代' ||
            stepTitle === '青铜器典型知识' ||
            stepTitle === '青铜器典型特征') {
          if (currentSubStep.value > 0) {
            currentSubStep.value--;
          } else if (currentMainStep.value > 0) { // 从第一个步骤开始
            currentMainStep.value--;
            const previousStep = steps.value[currentMainStep.value];
            currentSubStep.value = previousStep.subSteps ? previousStep.subSteps.length - 1 : 0;
          }
        }
      } else {
        if (currentMainStep.value > 0) { // 从第一个步骤开始
          currentMainStep.value--;
        }
      }
      scrollToTop();
    };

    // 导航到下一步
    const nextContent = () => {
      if (isCoverPage.value) {
        // 从封面进入学习指南
        currentMainStep.value = 0;
        currentSubStep.value = 0;
        scrollToTop();
        return;
      }

      if (currentStepHasSubSteps.value) {
        const stepTitle = currentMainStepObj.value.title;
        if (stepTitle === '青铜器的分类' ||
            stepTitle === '青铜器的年代' ||
            stepTitle === '青铜器典型知识' ||
            stepTitle === '青铜器典型特征') {
          if (currentSubStep.value < currentMainStepObj.value.subSteps.length - 1) {
            currentSubStep.value++;
          } else if (currentMainStep.value < steps.value.length - 1) {
            currentMainStep.value++;
            currentSubStep.value = 0;
          }
        }
      } else {
        if (currentMainStep.value < steps.value.length - 1) {
          currentMainStep.value++;
        }
      }
      scrollToTop();
    };

    // 完成阅读并跳转到实战练习
    const completeReading = () => {
      showModal.value = true;
    };

    // 确认跳转
    const confirmNavigation = () => {
      router.push({ name: 'RecogChallenge' , query: { fromSection: 2 }});
    };

    // 取消跳转
    const closeModal = () => {
      showModal.value = false;
    };

    // 判断是否为第一步
    const isFirstContent = computed(() => {
      return currentStepNumber.value === 1 && !isCoverPage.value;
    });

    // 判断是否为最后一步
    const isLastContent = computed(() => {
      return currentStepNumber.value === totalSteps.value;
    });

    // 开始学习指南
    const startGuide = () => {
      currentMainStep.value = 0; // 第一个实际步骤
      currentSubStep.value = 0;
      scrollToTop();
    };

    // 判断是否为封面页
    const isCoverPage = computed(() => currentMainStep.value === -1);

    // 滚动到页面顶部的方法
    const scrollToTop = () => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    };

    // 返回功能，用于内容页的返回按钮，返回首页
    const goBack = () => {
      if (fromSection.value !== null) {
        router.push({ name: 'Home', query: { scrollToSection: fromSection.value } });
      } else {
        router.push({ name: 'Home' });
      }
    };

    // 监听步骤变化，确保每次变化后滚动到顶部
    watch([currentMainStep, currentSubStep], () => {
      scrollToTop();
    });

    return {
      steps,
      currentMainStep,
      currentSubStep,
      currentStepHasSubSteps,
      currentContent,
      currentStepTitle,
      currentContentKey,
      currentStepNumber,
      totalSteps,
      goToMainStep,
      goToSubStep,
      prevContent,
      nextContent,
      isFirstContent,
      isLastContent,
      currentMainStepObj,
      startGuide,
      completeReading,
      showModal,
      confirmNavigation,
      closeModal,
      isCoverPage,
      goBack
    };
  },
};
</script>

<style scoped>
/* 基础布局 */
.bg-image{
  background-image: url('@/assets/m18.jpg'); 
  background-repeat: no-repeat; /* 背景图不重复 */
  background-size: cover; /* 背景图覆盖整个区域 */
  background-position: center; /* 背景图居中 */
  background-attachment: fixed; /* 背景图固定 */
}

.bronze-guide {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    border-radius: 15px;
}

/* 封面页 */
.cover-page {
    margin-top: 52px;
    position: relative;
    width: 100%;
    height: 83vh; /* 根据需要调整高度 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.cover-content {
  padding: 40px;
  border-radius: 15px;
  text-align: center;
  max-width: 80%;
  position: relative;
  z-index: 5;
}

.cover-title {
    font-size: 3em;
    margin-bottom: 20px;
    color: #fcd97a;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.8);
}

.cover-description {
    font-size: 1.5em;
    line-height: 1.8;
    margin-bottom: 30px;
}

.start-button {
    padding: 12px 40px;
    font-size: 1em;
    background-color: #e9d184;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    color: #161616;
    font-weight: bold;

}

.start-button:hover {
    transform: scale(1.05);
}

/* 主标题 */
.bronze-container {
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  margin-top:2vw;
  background: linear-gradient(45deg, #1a1613, #6f4d32dd); /* 深棕色到青铜色的渐变 */
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  position: relative; /* 保持返回按钮在头部 */
}

.main-title {
  text-align: center;
  margin: 2vw;
  color: #fdf6e3;
  font-size: 2.8em;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
  letter-spacing: 2px;
}

/* 主步骤导航 */
.main-steps ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.main-steps li {
  padding: 1px 20px;
  cursor: pointer;
  color: #ffffff;
  font-size: 22px; /* 加大字体大小 */
  font-weight: bolder; /* 加粗字体 */
}

.main-steps li.active,
.main-steps li:hover {
    color: #e8d473;
    transform: scale(1.05);
}

/* 子步骤导航 */
.sub-steps ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.sub-steps li {
    margin: 6px 10px;
    padding: 10px 20px;
    background-color: #f7f6f3dc;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s, color 0.3s;
    color: #020202;
    font-weight: bold;
}

.sub-steps li.active,
.sub-steps li:hover {
    color: #683434;
    transform: scale(1.05);
}

/* 内容展示 */
.step-content {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 30px;
    background-color: #373333dd;
    border-radius: 15px;
    margin-bottom: 30px;
}

/* 内容行布局 */
.content-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.content-row:last-child {
    margin-bottom: 0;
}

/* 修改后的图片样式 */
.content-image, .category-image, .feature-image {
    max-height: 50vh;          /* 限制图片的最大高度为视口高度的一半 */
    width: auto;               /* 宽度自动调整，保持比例 */
    height: auto;              /* 高度自动调整，保持比例 */
    max-width: 100%;           /* 确保图片不会超出容器宽度 */
    object-fit: contain;       /* 确保图片在容器内完整显示 */
    border-radius: 12px;
    margin-right: 40px;
    transition: transform 0.3s;
}

.content-image:hover, .category-image:hover, .feature-image:hover {
    transform: scale(1.05);
}

/* 文字内容样式 */
.content-text {
    flex: 1 1 50%;
    max-width: 50%;
}

.content-text h3,
.content-text h4 {
    margin-bottom: 10px;
    color: #e9dba2;
    font-size: 20px;
    font-weight: bolder;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.content-text p {
    font-size: 1.1em;
    line-height: 1.8;
    color: #ffffff;
}

/* 分类和特征 */
.classification-section, .features-section {
    width: 100%;
}

.category, .feature {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    border-radius: 12px;
    padding: 15px;
    transition: background-color 0.3s, transform 0.3s;
}

.feature:last-child {
    margin-bottom: 0;
}

.feature-description {
    font-size: 1em;
    line-height: 1.6;
    color: #302c23;
}

/* 导航按钮 */
.navigation-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.navigation-buttons .prev-button {
    background-color: #dbd5d5d8;
    color: #000000;
}

.navigation-buttons .prev-button:hover:not(:disabled) {
  background-color: #b68b57;
}

.navigation-buttons .next-button {
  background-color: #dbd5d5d8;
    color: #000000;
}

.navigation-buttons .next-button:hover:not(:disabled) {
  background-color: #b68b57;
}

.navigation-buttons button {
    padding: 12px 40px;
    font-size: 1em;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(212,175,55,0.5);
}

.navigation-buttons button:disabled {
    background-color: #555;
    cursor: not-allowed;
    color: #999;
    box-shadow: none;
}

/* 完成阅读按钮 */
.complete-button {
  background-color: #dbd5d5d8;
    color: #852b2b;
}

.complete-button:hover {
  background-color: #e7d5be;
}

/* 步骤指示器 */
.step-indicator {
    text-align: center;
    margin-top: 15px;
    color: #b4942a;
    font-size: 1.2em;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* 动画效果 */
.fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s;
}

.fade-enter-from, .fade-leave-to {
    opacity: 0;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .content-row {
        flex-direction: column;
    }

    .content-image, .category-image, .feature-image {
        max-width: 80%;
        margin-right: 0;
        margin-bottom: 15px;
        max-height: 50vh;
    }

    .content-text, .category-description, .feature-description {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .main-steps ul, .sub-steps ul {
        flex-direction: column;
        align-items: center;
    }

    .category, .feature {
        flex-direction: column;
        align-items: center;
    }

    .category-image, .feature-image {
        max-width: 100%;
    }

    .content-row .content-image {
        max-width: 100%;
    }

    .content-text {
        max-width: 100%;
    }

    .navigation-buttons button {
        width: 45%;
        padding: 10px 20px;
    }
}

.back-button {
  position: absolute;
  left: 20px;
  background-color: #8b4513; /* 深棕色 */
  color: #fdf6e3;
  border: none;
  padding: 12px 24px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  border-radius: 25px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.back-button:hover {
  background-color: #5e4b3c; /* 更深的棕色 */
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.5);
}

/* 自定义模态框样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background-color: #2a2a2a;
    padding: 30px 40px;
    border-radius: 15px;
    width: 90%;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    animation: fadeIn 0.3s ease-out;
}

.modal-content h2 {
    font-size: 2em;
    margin-bottom: 20px;
    color: #fff1a4;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.modal-content p {
    font-size: 1.2em;
    margin-bottom: 30px;
    color: #eeebe5;
}

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.confirm-button, .cancel-button {
    padding: 10px 30px;
    font-size: 1em;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    color: #1a1a1a;
    font-weight: bold;

}

.confirm-button {
  background-color: #dbd5d5d8;
    color: #000000;
}

.confirm-button:hover {
  background-color: #b68b57;
    transform: scale(1.05);
}

.cancel-button {
  background-color: #dbd5d5d8;
    color: #000000;
}

.cancel-button:hover {
  background-color: #b68b57;
    transform: scale(1.05);
}

/* 模态框动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
